<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<c-header bgColor="bg-white">
			<view class="header" slot="header">
				<navigator open-type="navigateBack" :delta="1" hover-class="none" class="t-btn back-btn iconfont f-wb">&#xe63b;</navigator> 
				<view class="title">生产任务</view> 
			</view>
		</c-header> 
		<view class="h45">
			<view class="fix-wrap">
				<view class="search-area">
					<view class="search-form">
						<view class="icon iconfont f-s44">&#xe622;</view>
						<input type="text" v-model="params.keyword" placeholder="请输入供应商名称" class="sc-inp"  >
						<view v-if="params.keyword" class="clear-btn iconfont f-s44" >&#xe724;</view>
					</view> 
					<view class="search-page">
						<view class="btn iconfont f-s40" @click="isShowSearch=true">&#xe6e9;</view>
						<view class="mask" v-if="isShowSearch" :style="{'height': 'calc(100% - '+(systemInfo.safeArea.top+90)+'px','top':(systemInfo.safeArea.top+44)+'px'}">
							<view class="search-body a-fadeinR">
								<view class="content-wrap">									 
									<view class="search-grid">
										<view class="label">申请时间</view>
										<view class="search-content">
											<view class="date-bar">
												<picker mode="date" class="date" @change="changeDate(1,$event)">
													<input type="text" v-model="params.apply_date_start" disabled placeholder="开始时间"> 
												</picker>
												<view class="line">~</view>
												<picker mode="date" class="date" @change="changeDate(2,$event)">
													<input type="text" v-model="params.apply_date_end" disabled placeholder="结束时间"> 
												</picker>
											</view>
										</view>
									</view> 									 
								</view>
								<view class="btn-bar">
									<view class="cancle" @click="isShowSearch=false">取消</view>
									<view class="confirm" @click="search">查询</view>
								</view>
							</view>
						</view>
					</view> 
				</view> 			 
			</view>
		</view>
		<view class="body"> 
			<view class="list-wrap">
				
				<template v-if="loadingState.default">
					<c-loading :loadingState="loadingState"></c-loading>
				</template>
				
				<template v-else>
					<template v-if="list.length>0"> 	
						<view>
						    <view class="item" v-for="(item,index) in list" :key="index" >
								<view class="swipe-action__content">
									<navigator :url="'/package_shebeixuqiu/add/add?page=detail&id='+item.id" hover-class="none" class="left">
										<view class="label">
											<text v-if="item.status==0">已提交</text>
											<text v-if="item.status==1">提单被拒</text>
											<text v-if="item.status==2">待采购</text>
											<text v-if="item.status==3">采购待入库</text>
											<text v-if="item.status==4">待领用</text>
											<text v-if="item.status==5">生产中</text>
											<text v-if="item.status==6">待检查</text>
											<text v-if="item.status==7">检查中</text>
											<text v-if="item.status==8">检查通过</text>
											<text v-if="item.status==9">检查不通过</text>
											<text v-if="item.status==10">待入库</text>
											<text v-if="item.status==11">结束</text> 
										</view>
										<view class="info">  
											<view class="name">序号 {{index+1}}</view> 
											<view class="name">单据编号： {{item.receipt_no}}</view> 
											<view class="name">申请人： {{item.username}}</view> 
											<view class="name">申请日期： {{item.receipt_date}}</view> 
											<view class="name">计划完工日期： {{item.plan_finish_date}}</view> 
										</view>
									</navigator>
									<view v-if="false" class="btn-wrap">
										<navigator :url="'/package_shebeixuqiu/add/add?page=detail&id='+item.id" hover-class="none"  class="btn">详情</navigator>
										<!-- <navigator :url="'/package_shebeixuqiu/add/add?page=edit&id='+item.id" hover-class="none" class="btn">编辑</navigator> -->
										<!-- <view class="btn">删除</view> -->
									</view>
								</view> 
						    </view>
						</view>
						
						
						<c-loading :loadingState="loadingState"></c-loading>
					</template>
					<template v-else>
						<c-empty msg="暂无信息"></c-empty>
					</template>
					
				</template>
				 
			</view>
		</view>
		
		<c-footer>
			<view slot="content" class="bottom-footer"> 
				<navigator url="/package_shebeixuqiu/add/add?page=add" hover-class="none" class="btn add">新增任务</navigator>	
			</view> 
		</c-footer>
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false,
				loadingState:{
					default:true,
					loading:false,
					completed:false
				},
				userInfo:uni.getStorageSync('userInfo'),
				systemInfo:getApp().globalData.systemInfo,
				isIphoneX:getApp().globalData.isIphoneX,
				isShowSearch:false,
				params:{
					page:1,
					limit:20,
					keywords:'',
					dep_id:'',
					apply_date_start:'',
					apply_date_end:''
				},
				deplist:[],
				list:[],
				total:0,
				isDel:false,
				tips:''
				
			}
		},
		async onLoad(params) {
			// this.getcrmcustomerdeplist();
			
			this.getlist();	 
		},
		onShow() {
			 
		},
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.params.page=1;
				return false
			}else{
				this.params.page++;
				this.getlist();	
			}	 
		},
		methods: {
			// 选择日期
			changeDate(type,e){
				// type 1 开始时间  2 结束时间 					
				if(type==1){
					this.params.apply_date_start=e.target.value;
				}
				if(type==2){
					this.params.apply_date_end=e.target.value;
				}
				
			},
			
			search(){
				this.params.page=1;
				this.list=[]; 
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				}
				this.getlist();
				this.isShowSearch=false;
			},
			  
			async getlist(){
				let res=await this.$api.user_api.producelist({
					page:this.params.page,
					limit:this.params.limit,
					product_name:'',
					apply_date_start:'',
					apply_date_end:'',
					apply_user:''
				});     
				console.log({
					page:this.params.page,
					limit:this.params.limit,
					product_name:'',
					apply_date_start:'',
					apply_date_end:'',
					apply_user:''
				},res) 
				if(res.data.code==200){   
					this.loadingState.default=false;
					this.loadingState.loading=true;  
					this.list=this.list.concat(res.data.data.list);	 
					this.total=res.data.data.count;
					if(this.list.length==this.total){
						this.loadingState.loading=false;
						this.loadingState.completed=true;
					} 
				}  
			}, 
			 
			del(idx,e){ 
				let _this=this;
				let item=this.list[idx];
				uni.showModal({
					content:"确定删除吗？",
					mask:true,
					async success(res) {
						if(res.confirm){
							let res=await _this.$api.user_api.spsupplierdel({
								id:item.id 
							});
							if(res.data.code==200){
								_this.list.splice(idx,1);
							}
						}
					}
				})	
			}
			
		},
		computed:{
			list_update(){
				return this.$store.state.shengchan_list
			} 
		},
		watch:{
			list_update(n,o){
				if(n!=o){	 
					this.params.page=1;
					this.list=[]; 
					this.loadingState={
						default:true,
						loading:false,
						completed:false
					}
					this.getlist();
				}
			} 
		}
		
	}
</script>

<style lang="less">
	.tips{
		margin:30rpx;
		font-size: 30rpx;	
	} 
	.search-grid{
		padding:20rpx;
		.label{
			margin-bottom: 20rpx;
			font-size: 26rpx;
			font-weight: bold;
		}
	}
	.date-bar{
		display: flex;
		align-items: center;
		.date{
			border: 1rpx solid #eee;
			border-radius: 10rpx; 					
			input{
				height: 50rpx;
				line-height: 50rpx;	
				padding:0 10rpx;
				font-size: 24rpx;
			}
		}
		.line{
			margin: 0 20rpx;
		}
	}
	.bottom-footer{
		display:flex;
		justify-content: space-around;
		.btn{
			height:34px;
			line-height: 34px;
			width:96%;
			margin: 0 auto;
			text-align: center;
			font-size: 30rpx;
			border: 2rpx solid #609FF7;
			border-radius: 10rpx;
		}
		.manage{
			background: #E7F1FE;
			color:#609FF7 ; 
		}
		.add{
			background: #609FF7;
			color:#fff ; 
		}
	}
	
	.list-wrap{
		padding-top:20rpx;
		.item{
			position: relative;		  
			border-radius: 15rpx;
			background:#fff;			
			margin: 0 0 20rpx;
		}
		.swipe-action__content{  
			padding: 30rpx;			 
			.label{ 
				position: absolute;
				right:20rpx;
				top:20rpx;
				padding: 5rpx 10rpx; 
				border: 2rpx solid #ff9600;
				border-radius: 10rpx;
				color: #ff9600;
				font-size: 28rpx;
			}
			.btn-wrap{
				justify-content: space-around;
				padding-top: 20rpx;
				border-top: 1rpx solid #ddd;
				.btn{
					width: 28%;
					padding: 15rpx 0;
					border: 2rpx solid #5DABFF;
					border-radius: 10rpx;
					color: #5DABFF;
					font-size: 30rpx;
					text-align: center;
				}
			}
			.left{
				display: flex;
				align-items: center;
				flex-grow: 2;
			}
			.icon{
				width:100rpx;
				height: 100rpx;
				margin-right: 20rpx;
				flex-shrink: 0;
				background: #5A9BF7; 
				border-radius: 15rpx;
				font-size: 36rpx;
				text-align: center;
				line-height: 100rpx;
				color:#fff;
			}
			.info{
				flex-grow: 2; 
				
				.name{ 
					margin-bottom: 30rpx;
					font-size: 32rpx;
				}
				.params{
					font-size:28rpx;
					color:#999;
					.text{
						margin-bottom:8rpx;
					}
				}
			}
			.del-icon{
				display: flex;
				align-items: center;
				justify-content: center;
				flex-shrink: 0;
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				background: #E2EDFD;
				color: #61A0F7;
			}
		}
	}
</style>
